<!-- 侧边栏  -->
<template>
    <el-aside width="300px" class="vs-sidebar">
        <el-row>
            <el-col :span="20" :offset="2">
                <div class="select-box">
                    <el-autocomplete v-model="searchTag" :fetch-suggestions="queryTagSearch" placeholder="Please enter tag ..." @select="handleSearchTagSelect">
                        <i class="el-icon-search el-input__icon" slot="suffix" @click="handleSearchTagSelect"> </i>
                        <template slot-scope="{ item }">
                            <div class="name">{{ item }}</div>
                        </template>
                    </el-autocomplete>
                </div>
                <el-menu>
                    <el-menu-item :index="item" v-for="(item, index) in filterTag" :key="index"> {{item}} </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </el-aside>
</template>
<script>
export default {
    name: 'vs-sidebar',
    data() {
        return {
            searchTag: '',
            filterTag: []
        }
    },
    created() {
        document.title = '';
    },
    mounted() {
        this.$nextTick(function() {});
    },
    methods: {
        // 处理 链接标签 搜索选择
        handleSearchTagSelect(key, keyPath) {
            this.searchTag = key;
            console.log(key, keyPath);
        },
        // 链接标签 查询 搜索
        queryTagSearch(queryString, cb) {
            let tags = this.tags;
            let results = queryString ? tags.filter(this.tagsFilter(queryString)) : tags;
            cb(results);
        },
        // 链接标签 数据选项 过滤器
        tagsFilter(queryString) {
            return (item) => {
                return (item.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            }
        },

    },
}

</script>
<style scoped></style>
